/* eslint-disable react-hooks/exhaustive-deps */
import React,{ Fragment,useState ,useEffect,useRef} from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import MyUpload from '../../../components/Upload/Upload'


import { Editor, Toolbar } from '@wangeditor/editor-for-react'

import { Button, Drawer, Input,Tag,Tooltip} from 'antd';

import utils from '../../../util/utils'
import http from '../../../util/http'


const { TextArea } = Input;

function MyEditor() {
  const navigate = useNavigate ();
  const location = useLocation();
  console.log(location)

  const [categoryList,setCategoryList] = useState([
    {
      Id:"1",
      CategoryName:"类别1"
    },
    {
      Id:"2",
      CategoryName:"类别2"
    },
    {
      Id:"3",
      CategoryName:"类别3"
    }
  ],);

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };


  const [editor, setEditor] = useState(null)  
  const [html, setHtml] = useState('')
  const toolbarConfig = { }   
  const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
  }
  useEffect(() => {
    return () => {
        if (editor == null) return
        editor.destroy()
        setEditor(null)
    }
  }, [editor])


  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [editInputIndex, setEditInputIndex] = useState(-1);
  const [editInputValue, setEditInputValue] = useState('');
  const inputRef = useRef(null);
  const editInputRef = useRef(null);
  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);
  useEffect(() => {
    editInputRef.current?.focus();
  }, [inputValue]);
  const handleClose = (removedTag) => {
    const newTags = tags.filter((tag) => tag !== removedTag);
    setTags(()=>newTags);
  };
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const handleInputConfirm = () => {
    if (inputValue && tags.indexOf(inputValue) === -1) {
      setTags([...tags, inputValue]);
    }
    setInputVisible(false);
    setInputValue('');
  };
  const handleEditInputConfirm = () => {
    const newTags = [...tags];
    newTags[editInputIndex] = editInputValue;
    setTags(newTags);
    setEditInputIndex(-1);
    setInputValue('');
  };
  return (
    <Fragment >

      
      <div className="editor">
        <div className="editor-wrap">
          <div style={{ border: '1px solid #ccc', zIndex: 100,backgroundColor:'white',marginBottom:".625rem"}}>
                  <Toolbar
                      editor={editor}
                      defaultConfig={toolbarConfig}
                      mode="default"
                      style={{ borderBottom: '1px solid #ccc' }}
                  />
                  <Editor
                      defaultConfig={editorConfig}
                      value={html}
                      onCreated={setEditor}
                      onChange={editor => setHtml(editor.getHtml())}
                      mode="default"
                      style={{ minHeight: '500px'}}
                  />
            </div>

            <Button type="primary" onClick={()=>showDrawer()}>发布</Button>
           
        </div>
      </div>

      <Drawer
        title="发布文章"
        placement="right"
        closable={false}
        onClose={onClose}
        open={open}
        className="drawer-box"
      >
             
        <div className="input-item">
          <span>分类:</span>
          <div>
            <div style={{height:"22px",marginBottom:"6px"}}>
              <span style={{color:"#f50"}}>您还未选择类别</span>
            </div>
            {
              categoryList && categoryList.map((item)=>(
                <Tag color="orange">{item.CategoryName}</Tag>
              ))
            }
          
          </div>
        </div>

        <div className="input-item">
        <span>添加标签:</span>
          <div>
            {
              tags.map((tag, index) => {
                if (editInputIndex === index) {
                  return (
                    <Input
                      ref={editInputRef}
                      key={tag}
                      size="small"
                      value={editInputValue}
                      onChange={(e)=>setEditInputValue(e.target.value)}
                      onBlur={handleEditInputConfirm}
                      onPressEnter={handleEditInputConfirm}
                    />
                  );
                }

                const tagElem = (
                  <Tag
                    style={{marginBottom:"4px"}}
                    key={tag}
                    closable={true}
                    onClose={() => handleClose(tag)}
                  >
                    {tag}
                  </Tag>
                );
                return tagElem

            })}

            {inputVisible && (
              <Input
                style={{width:"50%"}}
                ref={inputRef}
                type="text"
                size="small"
                value={inputValue}
                onChange={handleInputChange}
                onBlur={handleInputConfirm}
                onPressEnter={handleInputConfirm}
              />
            )}
            {!inputVisible && (
              <Tag className="site-tag-plus" onClick={()=>setInputVisible(true)}>
                新增标签
              </Tag>
            )}
          </div>
        </div>

        <div className="input-item">
          <span>文章封面:</span>
          <div>
            <MyUpload/>
          </div>
        </div>

        <div className="input-item">
          <span>文章描述:</span>
          <div>
            <TextArea rows={4} />
          </div>
        </div>
      
        <div className="btn-wrap">
          <Button onClick={()=>showDrawer()} style={{marginRight:"6px"}}>保存草稿</Button>
          <Button type="primary" onClick={()=>showDrawer()}>确定并发布</Button>
        </div>
      </Drawer>
    </Fragment>

  )
}

export default MyEditor;